## Sign Up Field Order

The Authenticator allows a custom order of sign up fields on the Sign Up page.

Order is determined by a `signUpForm` `@Compose` block that is passed into the Authenticator state.

In the example below the order will be set as `email`, `username`, `password` and finally `confirm_password`.

```kotlin
val state = rememberAuthenticatorState(
    signUpForm = {
        email()
        username()
        password()
        confirmPassword()
    }
)
```

## Form Field Customization

The Authenticator allows for customization of multiple aspects of the form fields. The sections below will describe several use cases and how to modify the appropriate fields.

Overall, you can customize the hint or label of any input as described in the
[labels and placeholder](#updating-labels-placeholders-required-fields-and-showing-labels) section.

Additionally, when using a custom Sign Up form as described in [Sign Up Field Order](#sign-up-field-order), you can create fields with custom labels and hints, as well as specify whether the field is required, or pass your own custom validator.

### Updating labels, hints, setting required and adding validators

The following example customizes the Sign Up page by:

- Making the profile field optional.
- Customizing the website field (by adding a `text()` field and giving it the `key` `FieldKey.Website`):
  - Adding a custom label.
  - Adding a custom hint.
  - Adding a custom validator.
- Adding a custom bio text field.
- Adding a custom terms of service checkbox.

**Note:** On the sign in page the input name is always `username`, regardless of the login mechanism type.

```kotlin
val state = rememberAuthenticatorState(
    signUpForm = {
        username()
        password()
        confirmPassword()
        email()

        profile(required = false)

        text(
            key = FieldKey.Website,
            label = "Website",
            hint = "Put your website here",
            required = true,
            validator = {
                if (!content.contains("example.com")) {
                    FieldError.Custom("Your website must have a domain of example.com")
                } else {
                    null
                }
            }
        )

        text(
            key = FieldKey.Custom("bio"),
            label = "Bio",
            maxLines = 3
        )

        custom(
            key = FieldKey.Custom("terms"),
            label = "Service Terms",
            validator = {
                if (!content.toBoolean()) {
                    FieldError.Custom("You must agree to the terms of service")
                } else null
            }
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                Checkbox(
                    checked = fieldState.content.toBoolean(),
                    onCheckedChange = { fieldState.content = it.toString() },
                )
                Text("I agree to the terms of service")
            }
        }
    }
)
```